Vue.component('operator-profile', {
  data() {
    return {
      activeTab: 'profile',
      userInfo: {
        id: null,
        username: '',
        email: '',
        phone: '',
        avatar: '',
        role: '',
        created_at: '',
        last_login: ''
      }
    };
  },
  methods: {
    async loadUserInfo() {
      try {
        const userStr = localStorage.getItem('user');
        if (userStr) {
          const user = JSON.parse(userStr);
          this.userInfo = { ...user };
        }
      } catch (error) {
        console.error('获取用户信息失败:', error);
        this.$message.error(error.message || '获取用户信息失败');
      }
    },
    handleProfileUpdated(updatedUser) {
      this.userInfo = updatedUser;
      // 触发导航栏更新
      this.$root.$emit('user-info-updated');
    },
    handleAvatarUpdated(updatedUser) {
      this.userInfo = updatedUser;
      // 触发导航栏更新
      this.$root.$emit('avatar-updated');
    }
  },
  async mounted() {
    await this.loadUserInfo();
  },
  template: `
    <div class="profile-container">
      <el-card>
        <div slot="header">
          <span>个人中心</span>
        </div>
        
        <el-tabs v-model="activeTab">
          <!-- 个人信息 -->
          <el-tab-pane label="个人信息" name="profile">
            <div class="profile-content">
              <div class="avatar-section">
                <avatar-upload 
                  :user-info="userInfo" 
                  @avatar-updated="handleAvatarUpdated">
                </avatar-upload>
              </div>
              
              <div class="profile-info">
                <profile-info 
                  :user-info="userInfo" 
                  @profile-updated="handleProfileUpdated">
                </profile-info>
              </div>
            </div>
          </el-tab-pane>
          
          <!-- 安全设置 -->
          <el-tab-pane label="安全设置" name="security">
            <password-change></password-change>
          </el-tab-pane>
        </el-tabs>
      </el-card>
      
      <style>
        .profile-content {
          display: flex;
          gap: 30px;
        }
        
        .avatar-section {
          display: flex;
          flex-direction: column;
          align-items: center;
          min-width: 200px;
        }
        
        .profile-info {
          flex: 1;
        }
      </style>
    </div>
  `
});
